<template>
  <div class="box">
    <!--  props传递 遍历shopCar 把属性一个一个传给子组件 -->
    <Item
      v-for="data in shopCar"
      :key="data.id"
      :name="data.name"
      :desc="data.desc"
      :id="data.id"
      :num="data.num"
      :o="{ a: 1, b: 2 }"
    />
  </div>
</template>

<script>
  import Item from "./components/Item.vue";
  import { nanoid } from "nanoid";

  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {
        shopCar: [
          {
            id: nanoid(),
            name: "iphone14",
            desc: "more strong",
            num: 1,
          },
          {
            id: nanoid(),
            name: "小米",
            desc: "xiaomi",
            num: 2,
          },
          {
            id: nanoid(),
            name: "华为",
            desc: "huaweiP40",
            num: 3,
          },
        ],
      };
    },
  };
</script>

<style>
  /* .box{
    background: lightblue;
  } */
</style>
